<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>

    .container {
        display: flex;
        flex-wrap: wrap;
    }

    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: 20px;
        margin-bottom: 20px;
        width: 300px;
        height: 200px;
        border: 1px dashed #ccc;
    }

    .upload_progress {
        display: none;
        position: relative;
        margin-top: 10px;
        width: 200px;
        height: 3px;
        border-radius: 3px;
        background: rgb(206, 195, 195);
        overflow: hidden;
    }

    .upload_tip {
        font-size: 12px;
    }

    .progress {
        position: absolute;
        /* width: 30%; */
        height: 3px;
        border-radius: 3px;
        background-color: green;
    }

    button {
        width: 100px;
        height: 40px;
    }
</style>

<body>

    <div class="container">
        <div class="item">
            <h3>单一文件上传 [FORM-DATA]</h3>
            <section id="upload1">
                <input type="file" accept=".png,.jpg" class="upload_ipt" style="display: none;">
                <!-- 自己文件的按钮,来触发选择图片 -->
                <div>
                    <button class="upload_button select">选择文件</button>
                    <button class="upload_button upload">上传到服务器</button>
                </div>
                <div class="upload_tip">大小不能超过2ＭＢ </div>
                <ul class="upload_list">

                </ul>
            </section>
        </div>

        <div class="item">
            <h3>单一文件上传 [BASE64]</h3>
            <section id="upload2">
                <input type="file" accept=".png,.jpg" class="upload_ipt" style="display: none;">
                <!-- 自己文件的按钮,来触发选择图片 -->
                <div>
                    <button class="upload_button select">选择图片上传</button>
                </div>
            </section>
        </div>

                <div class="item">
            <h3>单一文件上传 [缩略图]</h3>
            <section id="upload3">
                <input type="file" accept=".png,.jpg" class="upload_ipt" style="display: none;">
                <!-- 自己文件的按钮,来触发选择图片 -->
                <div>
                    <button class="upload_button select">选择文件</button>
                    <button class="upload_button upload">上传到服务器</button>
                </div>
                <div class="upload_abber">
                    <img src="" alt="" style="width: 100px; height: 100px; display: none;">
                </div>
            </section>
        </div>


        
        <div class="item">
            <h3>单一文件上传 [进度条管控]</h3>
            <section id="upload4">
                <input type="file" accept=".png,.jpg" class="upload_ipt" style="display: none;">
                <!-- 自己文件的按钮,来触发选择图片 -->
                <div>
                    <button class="upload_button select">选择文件</button>
                </div>
                <div class="upload_progress">
                    <div class="progress"></div>
                </div>
            </section>
        </div>


        <div class="item">
            <h3>多文件上传 [FORM-DATA]</h3>
            <section id="upload5">
                <input type="file" accept=".png,.jpg" multiple class="upload_ipt" style="display: none;">
                <!-- 自己文件的按钮,来触发选择图片 -->
                <div>
                    <button class="upload_button select">选择文件</button>
                    <button class="upload_button upload">上传到服务器</button>
                </div>
                <ul class='upload_list'>

                </ul>
            </section>
        </div>

        <div class="item">
            <h3>拖拽上传 [FORM-DATA]</h3>
            <section id="upload6">
                <input type="file" accept=".png,.jpg" multiple class="upload_ipt" style="display: none;">
                <div class="upload-box">
                    <span>将文件拖到此处,或</span>
                    <span  id="upload-button" style="color: rgb(58, 58, 193); cursor: pointer;">点击上传</span>
                </div>
            </section>
        </div>

    </div>
    <script src="node_modules/axios/dist/axios.min.js"></script>
    <script src="node_modules/qs/dist/qs.js"></script>
    <script src="node_modules/spark-md5/spark-md5.min.js"></script>
    <script src="./src/js/utils.js"></script>
    <script src="./src/js/instance.js"></script>
    <script src="./src/js/upload.js"></script>
</body>

</html>